import { Metadata } from 'next';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Progress } from '@/components/ui/progress';
import {
  SolutionsBreadcrumb,
  SolutionsNavigationSimple,
} from '@/components/solutions-navigation';
import {
  Shield,
  Brain,
  Zap,
  BarChart3,
  AlertTriangle,
  CheckCircle,
  Settings,
  Eye,
} from 'lucide-react';

export const metadata: Metadata = {
  title: '智能风控系统解决方案 | CActor金融科技',
  description:
    'CActor智能风控系统：AI驱动、实时决策、规则引擎的企业级风险管理解决方案',
};

/**
 * 智能风控系统解决方案页面
 * 展示CActor在智能风控领域的完整技术方案
 */
export default function IntelligentRiskControlPage() {
  const riskMetrics = [
    { label: '风险识别准确率', value: '99.2%', progress: 99 },
    { label: '决策响应时间', value: '< 50ms', progress: 95 },
    { label: '误报率', value: '< 0.1%', progress: 98 },
    { label: '系统可用性', value: '99.99%', progress: 100 },
  ];

  const aiComponents = [
    {
      name: '风险评估AI Agent',
      description: '智能风险模型和评估算法',
      icon: Brain,
      color: 'bg-blue-500',
      features: ['机器学习', '深度学习', '模式识别', '异常检测'],
    },
    {
      name: '实时决策引擎Actor',
      description: '毫秒级风险决策处理',
      icon: Zap,
      color: 'bg-green-500',
      features: ['规则引擎', '决策树', '实时计算', '并行处理'],
    },
    {
      name: '规则配置Actor',
      description: '动态风控规则管理',
      icon: Settings,
      color: 'bg-purple-500',
      features: ['规则编辑', '版本管理', 'A/B测试', '热更新'],
    },
    {
      name: '监控分析Actor',
      description: '风控效果实时监控',
      icon: Eye,
      color: 'bg-red-500',
      features: ['实时监控', '效果分析', '报表生成', '告警通知'],
    },
  ];

  const riskTypes = [
    {
      type: '交易风险',
      description: '异常交易模式识别',
      indicators: ['交易金额', '交易频率', '交易时间', '地理位置'],
      accuracy: '99.5%',
    },
    {
      type: '信用风险',
      description: '客户信用状况评估',
      indicators: ['历史记录', '还款能力', '资产状况', '行为模式'],
      accuracy: '98.8%',
    },
    {
      type: '欺诈风险',
      description: '欺诈行为实时检测',
      indicators: ['设备指纹', '行为特征', '网络环境', '关联分析'],
      accuracy: '99.7%',
    },
    {
      type: '合规风险',
      description: '监管合规性检查',
      indicators: ['政策法规', '黑名单', '制裁清单', '反洗钱'],
      accuracy: '100%',
    },
  ];

  return (
    <div className="min-h-screen bg-gradient-to-br from-red-50 to-orange-100 dark:from-slate-900 dark:to-slate-800">
      {/* Breadcrumb */}
      <div className="max-w-7xl mx-auto px-4 pt-6">
        <SolutionsBreadcrumb />
      </div>

      {/* Hero Section */}
      <section className="relative py-20 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <Badge variant="outline" className="mb-4">
              <Shield className="mr-2 h-4 w-4" />
              智能风控系统解决方案
            </Badge>
            <h1 className="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-red-600 to-orange-600 bg-clip-text text-transparent">
              AI驱动风险管理
            </h1>
            <p className="text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">
              基于CActor框架和AI技术的智能风控系统，提供实时风险评估、智能决策引擎和全方位风险监控能力
            </p>
          </div>

          {/* Risk Metrics */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-16">
            {riskMetrics.map((metric, index) => (
              <Card
                key={index}
                className="text-center bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-0"
              >
                <CardHeader className="pb-2">
                  <CardTitle className="text-2xl font-bold text-red-600">
                    {metric.value}
                  </CardTitle>
                  <CardDescription>{metric.label}</CardDescription>
                </CardHeader>
                <CardContent>
                  <Progress value={metric.progress} className="h-2" />
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* AI Architecture */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4">AI Agent架构</h2>
            <p className="text-lg text-muted-foreground">
              基于Actor模型的分布式AI风控架构
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {aiComponents.map((component, index) => {
              const IconComponent = component.icon;
              return (
                <Card
                  key={index}
                  className="group hover:shadow-lg transition-all duration-300 bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-0"
                >
                  <CardHeader>
                    <div className="flex items-center gap-4 mb-4">
                      <div
                        className={`p-3 rounded-lg ${component.color} text-white`}
                      >
                        <IconComponent className="h-6 w-6" />
                      </div>
                      <div>
                        <CardTitle className="text-xl">
                          {component.name}
                        </CardTitle>
                        <CardDescription>
                          {component.description}
                        </CardDescription>
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <div className="flex flex-wrap gap-2">
                      {component.features.map((feature, idx) => (
                        <Badge key={idx} variant="outline" className="text-xs">
                          {feature}
                        </Badge>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              );
            })}
          </div>

          {/* AI Decision Flow */}
          <Card className="mt-12 bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-0">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Brain className="h-5 w-5" />
                AI决策流程图
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="bg-gradient-to-r from-red-100 to-orange-100 dark:from-slate-700 dark:to-slate-600 p-8 rounded-lg">
                <div className="grid grid-cols-1 md:grid-cols-5 gap-4 text-center">
                  <div className="bg-white dark:bg-slate-800 p-4 rounded-lg shadow-sm">
                    <div className="font-semibold mb-2">数据收集</div>
                    <div className="text-sm text-muted-foreground">
                      实时数据采集 → 特征提取 → 数据预处理
                    </div>
                  </div>
                  <div className="bg-white dark:bg-slate-800 p-4 rounded-lg shadow-sm">
                    <div className="font-semibold mb-2">模型推理</div>
                    <div className="text-sm text-muted-foreground">
                      AI模型计算 → 风险评分 → 置信度评估
                    </div>
                  </div>
                  <div className="bg-white dark:bg-slate-800 p-4 rounded-lg shadow-sm">
                    <div className="font-semibold mb-2">规则引擎</div>
                    <div className="text-sm text-muted-foreground">
                      规则匹配 → 策略执行 → 决策融合
                    </div>
                  </div>
                  <div className="bg-white dark:bg-slate-800 p-4 rounded-lg shadow-sm">
                    <div className="font-semibold mb-2">决策输出</div>
                    <div className="text-sm text-muted-foreground">
                      风险等级 → 处理建议 → 执行动作
                    </div>
                  </div>
                  <div className="bg-white dark:bg-slate-800 p-4 rounded-lg shadow-sm">
                    <div className="font-semibold mb-2">反馈学习</div>
                    <div className="text-sm text-muted-foreground">
                      结果反馈 → 模型优化 → 策略调整
                    </div>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Risk Types */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4">风险类型覆盖</h2>
            <p className="text-lg text-muted-foreground">
              全方位的金融风险识别和管控
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {riskTypes.map((risk, index) => (
              <Card
                key={index}
                className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-0"
              >
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle className="text-xl">{risk.type}</CardTitle>
                    <Badge
                      variant="secondary"
                      className="bg-green-100 text-green-800"
                    >
                      {risk.accuracy}
                    </Badge>
                  </div>
                  <CardDescription>{risk.description}</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    <h4 className="font-semibold text-sm">关键指标：</h4>
                    <div className="flex flex-wrap gap-2">
                      {risk.indicators.map((indicator, idx) => (
                        <Badge key={idx} variant="outline" className="text-xs">
                          {indicator}
                        </Badge>
                      ))}
                    </div>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Technical Implementation */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <Tabs defaultValue="ai-engine" className="w-full">
            <TabsList className="grid w-full grid-cols-4">
              <TabsTrigger value="ai-engine">AI引擎</TabsTrigger>
              <TabsTrigger value="rule-engine">规则引擎</TabsTrigger>
              <TabsTrigger value="monitoring">监控系统</TabsTrigger>
              <TabsTrigger value="integration">集成方案</TabsTrigger>
            </TabsList>

            <TabsContent value="ai-engine" className="mt-6">
              <Card className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-0">
                <CardHeader>
                  <CardTitle>AI风险评估引擎</CardTitle>
                  <CardDescription>
                    基于机器学习的智能风险识别核心
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="bg-slate-900 text-green-400 p-6 rounded-lg font-mono text-sm overflow-x-auto">
                    <pre>{`// AI风险评估Actor实现
class RiskAssessmentAIActor extends CActor {
  constructor() {
    super()
    this.models = new Map()
    this.featureExtractor = new FeatureExtractor()
    this.modelCache = new LRUCache(1000)
  }

  // 实时风险评估
  async assessRisk(transaction: Transaction): Promise<RiskAssessment> {
    const startTime = Date.now()
    
    try {
      // 1. 特征提取
      const features = await this.extractFeatures(transaction)
      
      // 2. 多模型并行推理
      const modelResults = await Promise.all([
        this.runFraudDetectionModel(features),
        this.runCreditRiskModel(features),
        this.runAnomalyDetectionModel(features),
        this.runComplianceModel(features)
      ])
      
      // 3. 模型融合
      const fusedResult = this.fuseModelResults(modelResults)
      
      // 4. 置信度计算
      const confidence = this.calculateConfidence(modelResults, fusedResult)
      
      // 5. 风险等级确定
      const riskLevel = this.determineRiskLevel(fusedResult.score, confidence)
      
      const assessment = {
        transactionId: transaction.id,
        riskScore: fusedResult.score,
        riskLevel: riskLevel,
        confidence: confidence,
        factors: fusedResult.factors,
        processingTime: Date.now() - startTime,
        timestamp: Date.now()
      }
      
      // 6. 发送到决策引擎
      await this.send('decision-engine', {
        type: 'RISK_ASSESSMENT_COMPLETE',
        assessment: assessment
      })
      
      return assessment
      
    } catch (error) {
      await this.handleAssessmentError(transaction, error)
      throw error
    }
  }

  // 特征提取
  async extractFeatures(transaction: Transaction): Promise<FeatureVector> {
    const features = {
      // 交易特征
      amount: transaction.amount,
      currency: transaction.currency,
      transactionType: transaction.type,
      
      // 时间特征
      hour: new Date(transaction.timestamp).getHours(),
      dayOfWeek: new Date(transaction.timestamp).getDay(),
      
      // 用户特征
      userAge: await this.getUserAge(transaction.userId),
      accountAge: await this.getAccountAge(transaction.userId),
      historicalBehavior: await this.getUserBehaviorProfile(transaction.userId),
      
      // 设备特征
      deviceFingerprint: transaction.deviceInfo?.fingerprint,
      ipLocation: await this.getIPLocation(transaction.ipAddress),
      
      // 关联特征
      velocityFeatures: await this.calculateVelocityFeatures(transaction),
      networkFeatures: await this.calculateNetworkFeatures(transaction)
    }
    
    return this.featureExtractor.normalize(features)
  }

  // 模型结果融合
  fuseModelResults(results: ModelResult[]): FusedResult {
    const weights = [0.3, 0.25, 0.25, 0.2] // 各模型权重
    
    let weightedScore = 0
    let combinedFactors = []
    
    results.forEach((result, index) => {
      weightedScore += result.score * weights[index]
      combinedFactors.push(...result.riskFactors)
    })
    
    return {
      score: Math.min(Math.max(weightedScore, 0), 1),
      factors: this.deduplicateFactors(combinedFactors)
    }
  }
}`}</pre>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

            <TabsContent value="rule-engine" className="mt-6">
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <Card className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-0">
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <Settings className="h-5 w-5" />
                      规则配置系统
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
                        <h4 className="font-semibold mb-2">规则类型</h4>
                        <ul className="space-y-2 text-sm">
                          <li>• 阈值规则：金额、频率限制</li>
                          <li>• 黑白名单：用户、设备、IP</li>
                          <li>• 时间规则：营业时间、节假日</li>
                          <li>• 地理规则：地区限制、异地检测</li>
                        </ul>
                      </div>
                      <div className="bg-green-50 dark:bg-green-900/20 p-4 rounded-lg">
                        <h4 className="font-semibold mb-2">动态配置</h4>
                        <ul className="space-y-2 text-sm">
                          <li>• 实时规则更新</li>
                          <li>• A/B测试支持</li>
                          <li>• 版本回滚机制</li>
                        </ul>
                      </div>
                    </div>
                  </CardContent>
                </Card>

                <Card className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-0">
                  <CardHeader>
                    <CardTitle className="flex items-center gap-2">
                      <Zap className="h-5 w-5" />
                      决策执行引擎
                    </CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div className="bg-purple-50 dark:bg-purple-900/20 p-4 rounded-lg">
                        <h4 className="font-semibold mb-2">决策动作</h4>
                        <ul className="space-y-2 text-sm">
                          <li>• 自动通过：低风险交易</li>
                          <li>• 人工审核：中等风险</li>
                          <li>• 自动拒绝：高风险交易</li>
                          <li>• 额外验证：身份确认</li>
                        </ul>
                      </div>
                      <div className="bg-orange-50 dark:bg-orange-900/20 p-4 rounded-lg">
                        <h4 className="font-semibold mb-2">执行策略</h4>
                        <ul className="space-y-2 text-sm">
                          <li>• 并行决策处理</li>
                          <li>• 优先级队列管理</li>
                          <li>• 超时处理机制</li>
                        </ul>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>

            <TabsContent value="monitoring" className="mt-6">
              <Card className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-0">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <BarChart3 className="h-5 w-5" />
                    风控效果监控
                  </CardTitle>
                  <CardDescription>
                    实时监控风控系统运行状态和效果
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div className="text-center">
                      <div className="bg-blue-100 dark:bg-blue-900 p-4 rounded-lg mb-4">
                        <BarChart3 className="h-8 w-8 mx-auto text-blue-600" />
                      </div>
                      <h4 className="font-semibold mb-2">实时指标</h4>
                      <ul className="text-sm text-muted-foreground space-y-1">
                        <li>• 风险识别率：99.2%</li>
                        <li>• 误报率：0.08%</li>
                        <li>• 处理延迟：45ms</li>
                        <li>• 系统吞吐：15K/s</li>
                      </ul>
                    </div>
                    <div className="text-center">
                      <div className="bg-green-100 dark:bg-green-900 p-4 rounded-lg mb-4">
                        <CheckCircle className="h-8 w-8 mx-auto text-green-600" />
                      </div>
                      <h4 className="font-semibold mb-2">业务效果</h4>
                      <ul className="text-sm text-muted-foreground space-y-1">
                        <li>• 欺诈损失降低：95%</li>
                        <li>• 客户体验提升：30%</li>
                        <li>• 人工审核减少：80%</li>
                        <li>• 合规通过率：100%</li>
                      </ul>
                    </div>
                    <div className="text-center">
                      <div className="bg-red-100 dark:bg-red-900 p-4 rounded-lg mb-4">
                        <AlertTriangle className="h-8 w-8 mx-auto text-red-600" />
                      </div>
                      <h4 className="font-semibold mb-2">告警系统</h4>
                      <ul className="text-sm text-muted-foreground space-y-1">
                        <li>• 异常模式检测</li>
                        <li>• 性能阈值监控</li>
                        <li>• 自动故障恢复</li>
                        <li>• 多渠道通知</li>
                      </ul>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

            <TabsContent value="integration" className="mt-6">
              <Card className="bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-0">
                <CardHeader>
                  <CardTitle>系统集成方案</CardTitle>
                  <CardDescription>与现有业务系统的无缝集成</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-6">
                    <div>
                      <h4 className="font-semibold mb-3">API集成</h4>
                      <div className="bg-slate-100 dark:bg-slate-700 p-4 rounded-lg">
                        <ul className="space-y-2 text-sm">
                          <li>
                            • <strong>RESTful API：</strong>
                            标准HTTP接口，支持同步/异步调用
                          </li>
                          <li>
                            • <strong>GraphQL API：</strong>灵活的数据查询接口
                          </li>
                          <li>
                            • <strong>WebSocket：</strong>实时风险事件推送
                          </li>
                          <li>
                            • <strong>SDK支持：</strong>
                            Java、Python、Node.js等多语言SDK
                          </li>
                        </ul>
                      </div>
                    </div>
                    <div>
                      <h4 className="font-semibold mb-3">数据集成</h4>
                      <div className="bg-slate-100 dark:bg-slate-700 p-4 rounded-lg">
                        <ul className="space-y-2 text-sm">
                          <li>
                            • <strong>实时数据流：</strong>
                            Kafka、Pulsar消息队列集成
                          </li>
                          <li>
                            • <strong>批量数据：</strong>
                            ETL工具支持，定时数据同步
                          </li>
                          <li>
                            • <strong>数据库连接：</strong>
                            MySQL、PostgreSQL、MongoDB等
                          </li>
                          <li>
                            • <strong>数据湖集成：</strong>
                            Hadoop、Spark大数据平台
                          </li>
                        </ul>
                      </div>
                    </div>
                    <div>
                      <h4 className="font-semibold mb-3">部署方案</h4>
                      <div className="bg-slate-100 dark:bg-slate-700 p-4 rounded-lg">
                        <ul className="space-y-2 text-sm">
                          <li>
                            • <strong>云原生部署：</strong>Kubernetes容器化部署
                          </li>
                          <li>
                            • <strong>混合云部署：</strong>公有云+私有云混合架构
                          </li>
                          <li>
                            • <strong>边缘计算：</strong>就近部署，降低延迟
                          </li>
                          <li>
                            • <strong>灾备方案：</strong>多地域容灾，数据备份
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </section>

      {/* Success Stories */}
      <section className="py-16 px-4 bg-white/50 dark:bg-slate-800/50">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold mb-4">客户成功案例</h2>
            <p className="text-lg text-muted-foreground">
              真实的业务价值和效果验证
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <Card className="text-center bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-0">
              <CardHeader>
                <div className="bg-blue-100 dark:bg-blue-900 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
                  <Shield className="h-8 w-8 text-blue-600" />
                </div>
                <CardTitle className="text-lg">某大型银行</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground mb-4">
                  部署智能风控系统后，欺诈损失降低95%，客户投诉减少60%
                </p>
                <div className="space-y-2">
                  <Badge variant="outline">日处理量：500万笔</Badge>
                  <Badge variant="outline">准确率：99.5%</Badge>
                </div>
              </CardContent>
            </Card>

            <Card className="text-center bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-0">
              <CardHeader>
                <div className="bg-green-100 dark:bg-green-900 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
                  <Brain className="h-8 w-8 text-green-600" />
                </div>
                <CardTitle className="text-lg">金融科技公司</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground mb-4">
                  AI风控系统帮助实现秒级放贷决策，业务效率提升300%
                </p>
                <div className="space-y-2">
                  <Badge variant="outline">决策时间：&lt;1秒</Badge>
                  <Badge variant="outline">自动化率：95%</Badge>
                </div>
              </CardContent>
            </Card>

            <Card className="text-center bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-0">
              <CardHeader>
                <div className="bg-purple-100 dark:bg-purple-900 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
                  <BarChart3 className="h-8 w-8 text-purple-600" />
                </div>
                <CardTitle className="text-lg">支付平台</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground mb-4">
                  实时风控系统保障支付安全，用户体验显著提升
                </p>
                <div className="space-y-2">
                  <Badge variant="outline">误报率：&lt;0.1%</Badge>
                  <Badge variant="outline">用户满意度：98%</Badge>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 px-4">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-3xl font-bold mb-6">构建您的智能风控系统</h2>
          <p className="text-lg text-muted-foreground mb-8">
            获取基于CActor和AI技术的智能风控解决方案，实现全方位的风险管理
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" className="bg-red-600 hover:bg-red-700">
              获取解决方案
            </Button>
            <Button size="lg" variant="outline">
              预约演示
            </Button>
          </div>
        </div>
      </section>

      {/* Solutions Navigation */}
      <div className="max-w-7xl mx-auto px-4">
        <SolutionsNavigationSimple />
      </div>
    </div>
  );
}
